<template>
  <div class="content">
    <el-card>
      <div shadow="never" class="search-wrapper">
        <el-form ref="searchFormRef" :inline="true" :model="searchData">
          <el-form-item prop="name" label="数据名称">
            <el-input v-model="searchData.name" placeholder="请输入数据名称" clearable />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" :icon="Search" @click="handleSearch">查询</el-button>
            <el-button :icon="Refresh" @click="resetSearch">重置</el-button>
            <el-button type="warning" :icon="Plus" @click="handleAdd">新增</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
    <el-card class="mt-4">
      <div v-loading="loading" shadow="never">
        <div class="table-wrapper">
          <el-table :data="tableData" max-height="64vh">
            <el-table-column prop="name" label="数据名称" align="center" />
            <el-table-column label="操作" align="center" width="240px">
              <template #default="scope">
                <el-button type="primary" text bg size="small" @click="handleStart(scope.row)">执行</el-button>
                <el-button type="primary" text bg size="small" @click="handleUpdate(scope.row)">修改</el-button>
                <el-button type="danger" text bg size="small" @click="handleDelete(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="flex justify-end">
            <el-pagination
              v-model:current-page="paginationData.currentPage"
              background
              layout="total, prev, pager, next"
              :total="paginationData.total"
              :page-size="paginationData.pageSize"
              @current-change="getTableData"
              :small="true"
              class="flex justify-end mt-2"
            />
          </div>
        </div>
      </div>
    </el-card>
    <!-- <div>{{ $t('message.Home') }}---{{ $t('message.About') }}</div>
    <div @click="changeLanguage('zh_j')">中文</div>
    <div @click="changeLanguage('zh_f')">繁体</div> -->
  </div>
</template>

<script setup>
import { dataHandleList, dataHandleDel, dataHandleStart } from '@/api/dataLink'
import { Search, Refresh, Plus, ArrowDown } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { reactive } from 'vue-demi'

//语言切换
import { useI18n } from 'vue-i18n'
const { locale } = useI18n()
function changeLanguage(type) {
  locale.value = type
}
const router = useRouter()
const searchData = reactive({
  name: ''
})
const paginationData = reactive({
  total: 0,
  pageSize: 10,
  currentPage: 1
})
const searchFormRef = ref(null)
const loading = ref(false)
const tableData = ref([])
onMounted(() => {
  getTableData()
})
const handleSearch = () => {
  paginationData.currentPage = 1
  getTableData()
}
const resetSearch = () => {
  searchFormRef.value?.resetFields()
  if (paginationData.currentPage === 1) {
    getTableData()
  }
  paginationData.currentPage = 1
}
const handleAdd = () => {
  router.push('/dataAdd')
}
const handleUpdate = (row) => {
  router.push('/dataAdd?id=' + row._id)
}
const handleStart = (row) => {
  dataHandleStart(row._id).then(() => {
    ElMessage.success('执行成功')
  })
}
const getTableData = () => {
  loading.value = true
  dataHandleList({ ...searchData }, (paginationData.currentPage - 1) * paginationData.pageSize, paginationData.pageSize)
    .then((res) => {
      tableData.value = res.data.list
      paginationData.total = parseInt(res.data.total)
    })
    .finally(() => {
      loading.value = false
    })
}
const handleDelete = (row) => {
  ElMessageBox.confirm('确定删除该数据吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(() => {
      // TODO: 删除操作
      dataHandleDel(row._id).then((res) => {
        ElMessage.success('删除成功')
        getTableData()
      })
    })
    .catch(() => {})
}
</script>

<style lang="scss" scoped>
</style>
